/*
 * @Author: xiaoyan
 * @Date: 2021-11-24 16:09:53
 * @LastEditors: xiaoyan
 * @LastEditTime: 2022-02-10 14:40:40
 * @Description: 
 * @FilePath: \user_auth_front\src\pages\components\listHeader\index.tsx
 */
import { Button,Input,message,Select } from "antd";
import {DeleteOutlined,PlusOutlined,ProfileOutlined,BarsOutlined} from '@ant-design/icons';
import { openModal } from "@/store/modules/app"
import { useDispatch } from 'redux-react-hook';
import { organizationDels } from "@/api";
import SelectOrganizationLists from "../SelectOrganizationLists";
export default (props:any)=>{
    const { Option } = Select;
    const dispatch = useDispatch();
    const {Search} = Input;
    const {modalConf,selectedRowKeys,updateList,type} = props;
    const openAdd = ()=>{
        const action = openModal(modalConf);
        dispatch(action);
    };
    const dels = ()=>{
        const num = selectedRowKeys.length;
        if(num > 0){
            organizationDels({ids:selectedRowKeys}).then((res:any)=>{
                if(res.code === 0){
                    updateList({page:1});
                }else{
                    message.error(res.msg);
                }
            });
        }else{
            message.warning("请至少选择一个机构");
        }
    };
    const listHandler = ()=>{
        return (
            <>
                <Button icon={<ProfileOutlined />}></Button>
                <Button icon={<BarsOutlined />}></Button>
            </>
        );
    };
    const toolsArea = ()=>{
        return (
            <div className="header-tools">
                <Button type="primary" icon={<PlusOutlined />} onClick={openAdd}>新增</Button>
                <Button icon={<DeleteOutlined/>} onClick={dels}>删除</Button>
            </div>
        );
    };
    const changeOrganization = ()=>{
        return (
            <Select style={{width:200,marginRight:10}} placeholder="请选择机构" allowClear>
                {SelectOrganizationLists()}
            </Select>
        );
    };
    const search = (keyWord:string)=>{
        updateList({page:1,keyWord});
    };
    const searchArea = ()=>{
        return (
            <div className="header-search">
                {type === 'menu'?changeOrganization():null}
                <Search placeholder="请输入" onSearch={search} allowClear style={{ width: 200 }}/>
            </div>
        );
    };
    return (
        <div className="header-area">
            {toolsArea()}
            {searchArea()}
        </div>
    );
}